<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
	<h4 class="modal-title" id="general-modal-label">{{ $text_title_topup_ref }}</h4>
</div>
<div class="modal-body">
	<form class="form-ref-details">
		{{ Form::hidden('TOPUP_id', $TOPUP_id) }}
		<div class="form-group order_id-g">
			{{ Form::label('order_id', 'Order ID') }}
			{{ Form::label('ORDER_id', $ORDER_id ) }}
			{{ Form::hidden('order_id', $ORDER_id) }}
		</div>
		<div class="form-group reference_number-g">
			{{ Form::label('reference_number', 'Reference Number') }}
			{{ Form::text('reference_number', null, [ 'class' => 'form-control' ]) }}
		</div>
		<div class="form-group amount-g">
			{{ Form::label('amount', 'Amount') }}
			{{ Form::text('amount', null, [ 'class' => 'form-control']) }}			
		</div>
		<div class="form-group date-g">
			{{ Form::label('deposit_date', 'Deposit Date') }}
			{{ Form::text('date', null, [ 'class' => 'form-control datepicker-deposit-date' ]) }}
		</div>
	<center>
	{{ Form::label('deposit_slip_image', 'Deposit Slip Image') }}</br>
	<img id="img-uploadDepositSlipRef" src="http://www.candidmedia.in/wp-content/plugins/special-recent-posts/images/no-thumb.png" class="img-thumbnail"/>	
	{{ Form::hidden('image', null) }}
	
	<div class="response-message"></div>
	
	</br><button id="button_uploadDepositSlipRef" class="btn btn-primary upload-bankslip">Upload Deposit Slip</button>
	</center>
	</form>
</div>
<div class="modal-footer">
	{{ Form::button($btn_save_topup_ref, [ 'class' => 'btn btn-success save-topup-details' ]) }}
	{{-- Form::button($text_prev_voucher_red, ['class' => 'btn btn-primary btn-prev-vrec']) --}}
	{{-- Form::button($text_save_voucher_rec, ['class' => 'btn btn-success btn-save-vrec']) --}}
	<script type="text/javascript">
	$('.form-ref-details').on("keyup keypress", function(e) {
		var code = e.keyCode || e.which; 
		if (code  == 13) {               
			e.preventDefault();
			return false;
		}
	});
	</script>
	<script type="text/javascript">
	$('input[name="amount"]').numeric();
	</script>
	<script type="text/javascript">
	$('.datepicker-deposit-date').datetimepicker();
	</script>
	<script type="text/javascript">
	renderUpload('{{ URL::to('top-up/uploadDepositSlipRef') }}', 'uploadDepositSlipRef');
	</script>
	<script type="text/javascript">
	$(".save-topup-details").click(function(){
		var reference_details = $(".form-ref-details").serialize();
		$.ajax({
			url: '{{ URL::to('top-up/saveReferenceDetails') }}',
			type: 'POST',
			data: reference_details,
			beforeSend: function(){
				$(".response-message").html('<div class="alert alert-warning" role="alert"><h3><i class="fa fa-spinner fa-spin"></i>Saving...</h3></div>');
			},
			success: function(response_json){
				$(".response-message").html('');
				var response_json = JSON.parse(response_json);
				if(response_json.hasOwnProperty('error') && response_json.success == 0){
					var html = '<div class="alert alert-danger" role="alert"><ul>';
					$.each(response_json.error, function(error_key, error_val){
						html += '<li>' + error_val + '</li>';
					});
					html += '</ul></div>';
					$('.response-message').html(html);
				}

				if(response_json.success == 1){
					var html = '<div class="alert alert-success" role="alert">Success.</div>';
					$('.response-message').html(html);
					$('#general-modal').modal('hide');
					alert("Success");
				}
			}
		});
		
	});
	</script>
</div>